<template>
  <div class="keyword-analysis">
    <h2>关键词分析结果</h2>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="min-width: 700px">
      <el-tab-pane label="关键词结果" name="first">
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="seedword" label="种子关键词" width="180" />
          <el-table-column prop="compword" label="竞争关键词" width="120" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="num 字段数值排名前五的记录" name="second">
        <v-chart ref="hotwordsChart" style="width: 100%;height: 300px;"></v-chart>
      </el-tab-pane>
      <el-tab-pane label="其他网站与链接" name="third">
        <el-table :data="otherData" style="width: 100%">
          <el-table-column prop="name" label="名称" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </el-tab-pane>
<!--      <el-tab-pane label="Task" name="fourth">-->
<!--        <el-empty description="No data" />-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </div>
  <el-divider />
</template>

<script setup>
import {ref, onMounted, watch} from 'vue';
import * as echarts from 'echarts';
// import { ChatLineRound, Male } from "@element-plus/icons-vue";

// Reactive data
const activeName = ref('first');
const compwords = ref([])
const hotwords = ref([]);
const hotwordsChart = ref(null)

// Fetch data on component mount
onMounted(async () => {
  //初始化图表
  initChart();
  try {
    const seedword = 'your-seedword'; // 替换为实际的种子关键词
    const response = await fetch(`/api/lists?seedword=${seedword}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    compwords.value = data.compwords; // 假设返回的数据结构中包含 compwords 数组
    const list = ref([
      {
        seedword: 'your-seedword',
        compword: 'compwords',
      }
    ]);
  } catch (error) {
    console.error('Failed to fetch compwords:', error);
  }

  try {
    const getHotwordsResponse = await fetch('/api/getHotwords');
    if (!getHotwordsResponse.ok) {
      throw new Error(`HTTP error! status: ${getHotwordsResponse.status}`);
    }
    const data = await getHotwordsResponse.json();
    hotwords.value = data.seedwords;
  } catch (error) {
    console.error('Failed to fetch hotwords:', error);
  }


  // try {
  //   const reportResponse = await fetch('/api/report');
  //   if (!reportResponse.ok) {
  //     throw new Error(`HTTP error! status: ${reportResponse.status}`);
  //   }
  //   report.value = await reportResponse.json();
  // } catch (error) {
  //   console.error('Failed to fetch:', error);
  // }
});
const list = ref([
  {
    seedword: 'your-seedword',
    compword: 'compwords',
  }
]);
const otherData = ref([
  {
    name: '详细信息',
    address: 'topic-details.html'
  },
  {
    name: '报告信息',
    address: 'keyword-report.html'
  },
]);

const initChart = () => {
  if (hotwordsChart.value) {
    const myChart = echarts.init(hotwordsChart.value);
    const defaultData = [
      { word: 'Default Keyword 1', num: 100 },
      { word: 'Default Keyword 2', num: 80 },
      { word: 'Default Keyword 3', num: 60 },
      { word: 'Default Keyword 4', num: 40 },
      { word: 'Default Keyword 5', num: 20 }
    ];

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: hotwords.value.map(item => item.word) || defaultData.map(item => item.word) // Use default data if hotwords is empty
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '搜索次数',
          type: 'bar',
          data: hotwords.value.map(item => item.num) || defaultData.map(item => item.num), // Use default data if hotwords is empty
          label: {
            show: true,
            position: 'right'
          }
        }
      ]
    };
    myChart.setOption(option);
  }
};

// Watch for changes in hotwords data and update chart
watch(hotwords, () => {
  if (hotwords.value.length > 0) {
    initChart(); // Reinitialize chart with new data
  }
}, { immediate: true });

// Handle tab click event
const handleClick = (tab, event) => {
  console.log(tab, event);
};
</script>

<style scoped>
.keyword-analysis {
  margin: 20px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.statistic-row {
  display: flex;
  max-width: 1000px;
  margin-left: 50px;
  margin-bottom: 50px;
}
</style>